<template>
  <view
    class="floating-button-bottom"
    :class="{ jumping: component.jumping }"
    :style="buyButtonStyle"
    @click="$emit('click')"
  >
    <v-icon v-if="component.icon" size="44rpx" :src="component.icon" />
    <view class="button-text">
      {{ component.buyText }}
    </view>
  </view>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue';

const props = defineProps<{
  landingPageData: AdLandingPageVO;
  component: LandingPageBuyItem;
}>();

defineEmits<{
  click: [];
}>();

const rpxRatio = computed(() => {
  const system = uni.getSystemInfoSync();
  return 750 / system.windowWidth;
});
const buyButtonStyle = computed(() => {
  const style: CSSProperties = {};
  if (!props.component) return undefined;
  if (props.component.borderRadius) {
    const radius = props.component.borderRadius;
    style.borderRadius = `${radius * rpxRatio.value}rpx`;
  }
  if (props.component.textColor) {
    style.color = props.component.textColor;
  }
  if (
    props.component.linearGradientColorStart &&
    props.component.linearGradientColorEnd
  ) {
    style.background = `linear-gradient(90deg, ${props.component.linearGradientColorStart}, ${props.component.linearGradientColorEnd})`;
  } else if (
    props.component.linearGradientColorStart ||
    props.component.linearGradientColorEnd
  ) {
    style.background =
      props.component.linearGradientColorStart ||
      props.component.linearGradientColorEnd;
  }
  if (props.component.fontSize) {
    style.fontSize = `${props.component.fontSize * rpxRatio.value}rpx`;
  }
  return style;
});
</script>

<style lang="scss" scoped>
.floating-button-bottom {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  .button-text {
    font-size: inherit;
    font-weight: bold;
    color: inherit;
  }
  &.jumping {
    animation: jumping 1s infinite;
  }
}

@keyframes jumping {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
</style>
